<template>
  <div class="app">
    <h1>Reactive Proxy vs. Original</h1>
    <p>值得注意的是，reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的：</p>
  </div>
</template>

<script setup lang="ts" name="Study35tuDemo2">
import { reactive } from 'vue'

let raw = { name: '张三' }
let raw2 = {}

console.log(raw === raw2, 'raw === raw2') //false:即使它们都是空对象，它们在内存中的地址是不同的，所以 raw === raw2 的结果是 false。
let proxy = reactive(raw) //  包装的raw
console.log(raw === proxy) // reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的

// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy, 'reactive(raw) === proxy') // true

let proxy2: any = reactive(raw)
let proxy3 = reactive(JSON.parse(JSON.stringify(raw))) //深拷贝
proxy2.name = '李四'
console.log(proxy2, 'proxy2') //proxy2.name = '李四'
console.log(proxy, 'proxy') //proxy2.name = '李四'
console.log(proxy3, 'proxy3') //proxy2.name = '张三  因为深拷贝会递归地复制对象本身以及对象中的所有子对象，生成一个与原对象完全独立的新对象'

// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) //true

proxy2.next = raw2

let num = 3
proxy2.next2 = num

console.log(proxy2.next === raw2) //false
console.log(proxy2.next2 === num) //true
console.log(proxy2.next) //proxy对象
</script>

<style scoped></style>
